<template>
  <el-dialog
    width="400px"
    :title="`${!config?'新增':'编辑'}配置`"
    append-to-body
    :visible="dialogVisible"
    center
    @close="$emit('close')"
  >
    <el-form
      :inline="true"
      label-width="120px"
      :rules="rules"
      :model="form"
    >
      <el-form-item
        label="标志"
        prop="groupSign"
      >
        <el-input v-model="form.groupSign" />
      </el-form-item>
      <el-form-item
        label="参数标志描述"
        prop="groupSignDesc"
      >
        <el-input v-model="form.groupSignDesc" />
      </el-form-item>
      <el-form-item
        label="参数名"
        prop="paramName"
      >
        <el-input v-model="form.paramName" />
      </el-form-item>
      <el-form-item
        label="参数名描述"
        prop="paramNameDesc"
      >
        <el-input v-model="form.paramNameDesc" />
      </el-form-item>
      <el-form-item
        label="参数值"
        prop="paramValue"
      >
        <el-input v-model="form.paramValue" />
      </el-form-item>
      <el-form-item
        label="排序顺序"
        prop="sortOrder"
      >
        <el-input v-model="form.sortOrder" />
      </el-form-item>
      <el-form-item
        label="是否可修改"
        prop="mutable"
      >
        <el-select
          v-model="form.mutable"
        >
          <el-option
            v-for="item in [{label: '是', value: 'Y'}, {label: '否', value: 'N'}]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="集群归属"
        prop="clusterName"
      >
        <el-input v-model="form.clusterName" />
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button
        type="primary"
        @click="submit"
      >提交</el-button>
    </span>
  </el-dialog>

</template>

<script>
import coldApi from '@/api/coldStandby/index'
const form = {
  groupSign: '',
  groupSignDesc: '',
  paramName: '',
  paramNameDesc: '',
  paramValue: '',
  sortOrder: 1,
  mutable: 'N',
  clusterName: ''
}
export default {
  props: {
    dialogVisible: Boolean,
    config: Object
  },
  data() {
    return {
      form: {...form},
      rules: {
        groupSign: [
          { required: true, message: '请输入分组标识', trigger: 'blur' }
        ],
        groupSignDesc: [
          { required: true, message: '请输入分组标识描述', trigger: 'blur' }
        ],
        paramName: [
          { required: true, message: '请输入参数名', trigger: 'blur' }
        ],
        paramNameDesc: [
          { required: true, message: '请输入参数名描述', trigger: 'blur' }
        ],
        paramValue: [
          { required: true, message: '请输入参数值', trigger: 'blur' }
        ],
        sortOrder: [
          { required: true, message: '请输入排序顺序', trigger: 'blur' }
        ],
        mutable: [
          { required: true, message: '请选择是否可修改', trigger: 'blur' }
        ],
        clusterName: [
          { required: true, message: '请输入集群归属', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    config: {
      handler(val) {
        if (val) { this.form = val } else {
          this.form = {...form}
        }
      },
      deep: true
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.config) {
            this.edit()
          } else {
            this.add()
          }
        }
      })
    },
    add() {
      coldApi.addColdStandbyConfig(this.form)
        .then(() => {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.$emit('close')
        })
    },
    edit() {
      this.form.id = this.config.id
      coldApi.editColdStandbyConfig(this.form)
        .then(() => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$emit('close')
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
